<template>
    <first-template class="gate-brake">
        <div class="titles" slot="title">
            考勤闸机<Button type="primary" class="add-brake" @click="addBrakeGroup">添加考勤闸机</Button>
            <!-- <i-select style="width:100px;margin-left: 10px;" v-model="online" @on-change="change">
                <i-option :value="0">全部</i-option>
                <i-option :value="1">在线</i-option>
                <i-option :value="2">离线</i-option>
            </i-select> -->
        </div>
        <div slot="content" class="contss">
            <list-item :msg="item"  v-for="(item, i) in list" :key="i"></list-item>
             <div class="page-box" v-if="pageObj.pageSize < pageObj.total">
                <Page
                    :total="pageObj.total"
                    :pageSize="pageObj.pageSize"
                    :current="pageObj.page"
                    @on-change="changePage"
                    />
            </div>
            <Drawer
             :title="`${isEditer ? '编辑' : '添加'}考勤闸机组`"
             :closable="false" v-model="showAddGroup" width="700">
                <div class="form" >
                    <div class="form-item">
                        <span class="tis">设备名称：</span>
                        <div class="conts">
                            <Input type="text" v-model.trim="obj.devName" placeholder="请输入设备名称"></Input>
                        </div>
                    </div>
                    <div class="form-item">
                        <span class="tis">设备类型：</span>
                        <div class="conts">
                           <RadioGroup v-model="obj.devType">
                                <Radio label="1">
                                    <span>老设备</span>
                                </Radio>
                                <Radio label="2">
                                    <span>新设备</span>
                                </Radio>
                                <Radio label="3">
                                    <span>芊熠设备</span>
                                </Radio>
                            </RadioGroup>
                        </div>
                    </div>
                    <div class="form-item">
                        <span class="tis">进口的设备序列号：</span>
                        <div class="conts">
                            <Input type="text" placeholder="请输入进口的设备序列号" v-model.trim="obj.devInSerial"></Input>
                        </div>
                    </div>
                    <div class="form-item">
                        <span class="tis">出口的设备序列号：</span>
                        <div class="conts">
                            <Input type="text" placeholder="请输入出口的设备序列号" v-model.trim="obj.devOutSerial"></Input>
                        </div>
                    </div>
                </div>
                 <div class="footerss">
                    <Button @click="showAddGate = false">取消</Button><Button type="primary" @click="saveSB">确定</Button>
                </div>
            </Drawer>
        </div>
    </first-template>
</template>
<script>
import listItem from './ListItem'
import {deviceList, setDeviceList} from '@/js/api'
import {getDb}  from '@/js/common'
export default {
    name: 'gateBrake',
    components: {listItem},
    data () {
        return {
            list: [],
            showAddGroup: false, // 是否显示添加闸机组
            isEditer: false,
            showAddGate: false, // 是否显示添加闸机
            direction: '' ,// 方向
            pageObj: {
                pageSize: 10,
                total: 0,
                page: 1
            },
            prjName: '',
            obj: {
                DevName: '',
                devType: '',
                DevInSerial: '',
                devOutSerial: ''
            },
            online: 0
        }
    },
    created () {
        this.prjName = this.$route.query.prjName || ''
    },
    mounted () {
        this.getList()
    },
    methods: {
        change () {
            this.$set(this.pageObj, 'page', 1)
            this.getList()
        },
        // 保存设备
        saveSB () {
            const {devName, devType, devInSerial, devOutSerial} = this.obj
            if (devName == '') {
                this.$Message.error('请输入设备名称')
                return
            }
            if (devType == '') {
                this.$Message.error('请选择设备类型')
                return
            }
            if (devInSerial == '') {
                this.$Message.error('请输入进口的设备序列号')
                return
            }
            if (devOutSerial == '') {
                this.$Message.error('请输入出口的设备序列号')
                return
            }
            let p = JSON.parse(getDb('currentP'))
            const {companyID, prjNo} = p
            let userName = getDb('userName')
            let token = getDb('token')
            let param = {}
            param = {
                devName,
                devType: Number(devType),
                devInSerial,
                devOutSerial,
                userName,
                token,
                companyID: `${companyID}`,
                prjNo
            }
            setDeviceList(param).then(r => {
                if (r.code == 200) {
                    this.$Message.success('设置成功')
                    this.showAddGroup = false
                    setTimeout(() => {
                        this.getList()
                    }, 1000)
                } else {
                    this.$Message.error(r.msg)
                }
            })
        },
        changePage (page) {
            this.$set(this.pageObj, 'page', page)
            // this.getList()
        },
        addBrakeGroup () {
            this.showAddGroup = true
        },
        getList () {
            let param = {}
            let userName = getDb('userName')
            let token = getDb('token')
            const {pageObj: {page}, prjName, online} = this
            param = {
                currentPage: page,
                userName,
                token,
                upDatedAtStart: '2010',
                online
            }
            if (prjName) {
                param.prjName = prjName
            }
            this.list = []
            deviceList(param).then(r => {
                if (r.code == 200) {
                    this.list = r.data && r.data.list || []
                    this.pageObj.total = r.data.count || 0
                }
            })
        },
    }
}
</script>
<style lang="less" scoped>
.gate-brake {
    /deep/.titles {
        font-size: 18px;
        color: #333;
        .add-brake {
            float:right;
            margin-top: 15px;
        }
    }
    .contss {
        padding: 20px;
    }
}
/deep/.form {
    position: relative;
    width: 100%;
    height: 100%;
    .form-item {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        color: #333;
        font-size: 14px;
        .tis {
            width: 150px;
            font-weight: 500;
            text-align: right;
        }
        .conts {
            flex: 1;
        }
    }
    
}
/deep/.footerss {
        position: absolute;
        text-align: right;
        padding: 0 20px;
        width: 100%;
        bottom: 20px;
        left: 0;
        button {
            margin-left: 10px;
        }
    }
    .page-box {
        padding: 10px 0;
        text-align: center;
    }
</style>